<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			
		</div>
		
		<div id="div2">
			
		</div>
		
		<button onclick="add()">存储对象localStorage</button>
		<button onclick="deletea()">删除对象localStorage</button>
		<button onclick="addSessionStorage()">存储对象sessionStorage</button>
		<button onclick="deleteSessionStorage()">删除对象sessionStorage</button>
		
		<script>
			var div = document.getElementById("div1");
			var div1 = document.getElementById("div2");
			//判断是否支持localStorage 和 sessionStorage
			if(typeof(Storage)!=="undefined"){
				div.innerHTML = "我的名称是" + localStorage.getItem("name");
				div1.innerHTML = "我的名称是" + sessionStorage.getItem("name");
			}else{
				div.innerHTML = "抱歉，你的浏览器不支持WEB存储"
			}
			
			function add(){
				localStorage.setItem("name","小明");
				div.innerHTML = "我的名称是" + localStorage.getItem("name");
			}
			
			function addSessionStorage(){
				sessionStorage.setItem("name","小明");
				div1.innerHTML = "我的名称是" + sessionStorage.getItem("name");
			}
			
			function deleteSessionStorage(){
				sessionStorage.removeItem("name")
				div1.innerHTML = "我的名称是" + sessionStorage.getItem("name");
			}
			
			function deletea(){
				localStorage.removeItem("name")
				div.innerHTML = "我的名称是" + localStorage.getItem("name");
			}
		</script>
	</body>
</html>